<template>
    <div>
        <ul>
            <li v-for="item in messageList" :key="item.id" style="height: 35px">
              <router-link :to="`/home/message/${item.id}`">
                {{item.title}}
              </router-link>
              <button @click="toMessageDetail1(item.id)">push</button>
              <button @click="toMessageDetail2(item.id)">replace</button>
            </li>
        </ul>
        <button @click="back">back</button>
        <!--给messageDetai进行占位-->
        <router-view></router-view>
    </div>
</template>

<script>
    //模拟我们数据库中的数据  概要信息 可能会包含n条
    var messageList = [
      {id:0,title:"message00"},
      {id:1,title:"message01"},
      {id:2,title:"message02"},
      {id:3,title:"message03"},
    ]

    export default {
        name: "message",
        data(){
          return {
            messageList:[]
          }
        },
        methods:{
          //编程式路由的跳转 push
          toMessageDetail1(id){
            this.$router.push({
              name:"messageDetail",
              params:{id}
            })
          },
          //编程式路由的跳转 replace
          toMessageDetail2(id){
            this.$router.replace({
              name:"messageDetail",
              params:{id}
            })
          },
          //编程式路由的回退 back
          back(){
            this.$router.back()
          }
        },
        created(){
          //定时器来模拟请求
          setTimeout(()=>{
            this.messageList = messageList
          },2000)
        }
    }
</script>

<style scoped>

</style>
